import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Checkbox,
  Radio,
  Space,
  InputNumber,
} from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useState, useRef } from "react";
// import AddModal from "./AddModal";
import SetWagesModal from "./SetWagesModal";
import SetTypeModal from "./SetTypeModal";

const Page = (props) => {
  const { dispatch, submitLoading, typeData, roles } = props;
  const [form] = Form.useForm();
  const actionRef = useRef();
  const typeRef = useRef(null);

  const wagesRef = useRef(null);

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);

  const editInfo = (params) => {
    let rangeSets = JSON.parse(params.rangeSets || "[]").map((range) => {
      let { commissionMethod, value } = range;
      let saleRange = range.saleRange.split("-");
      return {
        commissionMethod,
        value,
        start: +saleRange[0],
        end: +saleRange[1],
      };
    });
    typeRef.current.setTitleType(1);
    typeRef.current.form.setFieldsValue({ ...params, rangeSets });
    typeRef.current.setOpen(true);
  };

  const submitForm = async (params) => {
    // const params = await form.validateFields()
    dispatch({
      type: `${namespace}/submitItem`,
      params,
      callback: () => {
        actionRef.current?.reload();
        typeRef.current.setOpen(false);
      },
    });
  };

  const toggleState = (params) => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: (res) => {
        actionRef.current?.reload();
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      const _status = parseInt(record.status, 10);
      return (
        <Space>
          <Button
            type="link"
            onClick={() => {
              editInfo(record);
            }}
          >
            编辑
          </Button>
          {_status === 0 ? (
            <Button
              type="link"
              danger
              onClick={() =>
                toggleState({
                  id: record.id,
                  status: 1,
                })
              }
            >
              禁用
            </Button>
          ) : (
            <Button
              type="link"
              onClick={() =>
                toggleState({
                  id: record.id,
                  status: 1,
                })
              }
            >
              启用
            </Button>
          )}
        </Space>
      );
    },
  };

  return (
    <PageContainer>
      <ProTable
        // search={false}
        actionRef={actionRef}
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              typeRef.current.setTitleType(0);

              typeRef.current.form.resetFields();
              typeRef.current.setOpen(true);
            }}
          >
            新建方案
          </Button>,
        ]}
        scroll={{ x: 1500 }}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        pagination={{
          showSizeChanger: true,
        }}
        columns={calcColumns({ operate, roles })}
      />
      <SetTypeModal
        ref={typeRef}
        submitForm={submitForm}
        dispatch={dispatch}
        roles={roles}
      />
      {/* <SetWagesModal ref={wagesRef} dispatch={dispatch} typeData={typeData} /> */}
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
